@charset "UTF-8";
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.index_web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../img/btn2_page1/bg.jpg)no-repeat left top/100% 100%;
    //首页
    .content1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
//      display: none;
        .music_logo {
            width: 45px;
            height: 45px;
            overflow: hidden;
            position: absolute;
            top: 3%;
            right: 5%;
            margin: 0;
            img{
                width: 100%;
                height: auto;
                
            }
        }
        .music_zt{
            animation: music_rotate 2000ms linear infinite;
            transform-origin: center;
        }
        .zyjjbld {
            width: 206px;
            height: 40px;
            margin: 5% auto;
        }
        .nbxswsxj {
            width: 380px;
            height: 206px;
            margin: 0 auto;
            position: relative;
            div {
                position: absolute;
            }
            .ni {
                animation-name: ni;
                animation-duration: 1s;
            }
            .ban {
                left: 100px;
                animation-name: ban;
                animation-duration: 1s;
                animation-delay: 1s;
            }
            .xi {
                left: 192px;
                animation-name: xi;
                animation-duration: 1s;
                animation-delay: 2s;
            }
            .shi {
                right: 0;
                animation-name: shi;
                animation-duration: 1s;
                animation-delay: 3s;
            }
            .wo {
                bottom: 0;
                animation-name: wo;
                animation-duration: 1s;
                animation-delay: 4s;
            }
            .song {
                bottom: 0;
                left: 96px;
                animation-name: song;
                animation-duration: 1s;
                animation-delay: 5s;
            }
            .xi2 {
                bottom: 0;
                left: 192px;
                animation-name: xi2;
                animation-duration: 1s;
                animation-delay: 6s;
            }
            .jiu {
                bottom: 0;
                right: 0;
                animation-name: jiu;
                animation-duration: 1s;
                animation-delay: 7s;
            }
        }
        .bainianhaohe {
            width: 331px;
            height: 374px;
            margin: 10% auto;
        }
        .xiyan {
            width: 318px;
            height: 46px;
            margin: 10% auto 0;
            position: relative;
            .mask1 {
                position: absolute;
                top: 0;
                left: 20px;
                width: 20px;
                height: 46px;
                background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));
                transform: skewX(-40deg);
                animation-name: mask1;
                animation-duration: 1s;
                animation-iteration-count: infinite;
            }
        }
        .xijiu {
            width: 318px;
            height: 46px;
            margin: 5% auto;
            position: relative;
            .mask1 {
                position: absolute;
                top: 0;
                left: 20px;
                width: 20px;
                height: 46px;
                background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
                transform: skewX(-40deg);
                animation-name: mask1;
                animation-duration: 1s;
                animation-iteration-count: infinite;
            }
        }
        .index_zezhao {
            display: none;
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.5);
            }
            .guize {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 414px;
                height: 250px;
                background: #e7c598;
                border-radius: 8px;
                margin-top: -125px;
                margin-left: -207px;
                #guanbi_zzc {
                    display: none;
                }
                .guanbi {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    background: #BF0C21;
                    margin-left: 362px;
                    margin-top: 12px;
                    position: relative;
                    .guanbi_x {
                        position: absolute;
                        width: 16px;
                        height: 34px;
                        top: 50%;
                        left: 50%;
                        margin-top: -17px;
                        margin-left: -8px;
                        span {
                            font-size: 25px;
                            color: #e7c598;
                            text-align: center;
                        }
                    }
                }
                p {
                    font-size: 20px;
                    text-align: center;
                    line-height: 12px;
                    color: #bf0c21;
                    margin: 20px 0;
                }
                p:first-child {
                    margin-top: 47px;
                }
                .guize_content {
                    width: 195px;
                    height: 38px;
                    background: #BF0C21;
                    border-radius: 6px;
                    display: block;
                    margin: 0 auto;
                    position: relative;
                    .guize_text {
                        position: absolute;
                        width: 126px;
                        height: 20px;
                        top: 50%;
                        left: 50%;
                        margin-top: -10px;
                        margin-left: -63px;
                        p {
                            font-size: 20px;
                            text-align: center;
                            margin: 0;
                            color: #e7c598;
                        }
                    }
                }
            }
        }
    }
    //规则页面************************
    .content2 {
        width: 100%;
        height: 100%;
        display: none;
        position: relative;
        .text_content {
            width: 84%;
            height: 89%;
            margin: 0 auto;
            overflow-y: auto;
            h2 {
                color: #e7c598;
                margin: 20px 0;
                font-size: 30px;
            }
            h2:first-child {
                margin-top: 100px;
            }
            p {
                font-size: 20px;
                color: #e7c598;
                line-height: 40px;
                text-align: justify;
            }
        }
        .banxiyan {
            position: absolute;
            left: 26%;
            bottom: 5%;
        }
        .xiaofangzi {
            position: absolute;
            bottom: 3%;
            right: 10%;
        }
    }
    //获奖名单页面
    .mingdan {
        width: 100%;
        height: 100%;
        position: relative;
        display: none;
        .mingdan_content {
            position: absolute;
            top: 5%;
            left: 25%;
        }
        .mingdan_liebiao {
            overflow-y: hidden;
            overflow-y: auto;
            width: 78.75%;
            height: 82.74%;
            position: absolute;
            top: 10%;
            left: 10%;
            border: 2px solid #E7C598;
            position: relative;
            ul {
                li {
                    width: 100%;
                    height: 93px;
                    border-bottom: 1px solid #E7C598;
                    color: #FFF;
                    position: relative;
                    span:first-child {
                        font-size: 30px;
                        font-family: "宋体";
                        position: absolute;
                        top: 32px;
                        left: 41px;
                    }
                    .touxiang {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        position: absolute;
                        top: 18px;
                        left: 96px;
                        background: url(../img/huojiangmingdan/images/huojiangtouxiang.jpg)no-repeat;
                    }
                    span:nth-of-type(2) {
                        font-size: 18px;
                        position: absolute;
                        top: 40px;
                        left: 178px;
                    }
                    span:last-child {
                        position: absolute;
                        top: 32px;
                        right: 41px;
                        font-size: 25px;
                    }
                }
                li:nth-child(1),
                li:nth-child(2),
                li:nth-child(3) {
                    color: #E7C598;
                    position: relative;
                    span:first-child {
                        font-family: "微软雅黑";
                        font-weight: bold;
                    }
                    .huangguan {
                        position: absolute;
                        top: 18px;
                        left: 42px;
                    }
                }
            }
        }
        .ziji {
            overflow-y: hidden;
            width: 78.75%;
            height: 93px;
            border: 2px solid #E7C598;
            position: absolute;
            left: 10%;
            top: 85%;
            background: #E7C598;
            ul {
                li {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    color: #BF0C21;
                    span:first-child {
                        font-size: 30px;
                        font-family: "宋体";
                        position: absolute;
                        top: 32px;
                        left: 26px;
                    }
                    .touxiang2 {
                        background: url("../img/huojiangmingdan/images/huojiangtouxiang2.jpg");
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        position: absolute;
                        top: 18px;
                        left: 96px;
                    }
                    #ziji_xxx {
                        font-size: 18px;
                        position: absolute;
                        top: 40px;
                        left: 178px;
                    }
                    span:last-child {
                        position: absolute;
                        top: 32px;
                        right: 41px;
                        font-size: 25px;
                    }
                }
            }
        }
        .xiaofangzi3 {
            position: absolute;
            bottom: 3%;
            right: 3%;
        }
    }
    //填写喜宴主人信息
    .tianxiexinxi{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        display: none;
        .tianxie_content{
            width: 376px;
            height: 440px;
            position: absolute;
            position: relative;
            top: 50%;
            left: 50%;
            margin-top: -220px;
            margin-left: -188px;
            p{
                color: #E7C598;
                font-size: 18px;
                text-align: center;
                margin: 10px auto;
            }
            p:nth-of-type(1){
                font-size: 30px;
                margin: 0;
            }
            .tianxie_part{
                width: 328px;
                height: 194px;
                position: absolute;
                position: relative;
                top: 40px;
                left: 50%;
                margin-left: -164px;
                ul{
                    li{
                        width: 100%;
                        height: 38px;
                        background: #E7C598;
                        margin-bottom: 14px;
                        border-radius: 8px;
                        position: relative;
                        p{
                            position: absolute;
                            left: 18px;
                            top: 8px;
                            font-size: 18px;
                            color: #BF0C21;
                        }
                        input{
                            width: 120px;
                            height: 24px;
                            position: absolute;
                            top: 7px;
                            right: 15px;
                            border: none;
                            background: transparent;
                        }
                    }
                    
                }
                .row_xian{
                    width: 1px;
                    height: 100%;
                    background: #BF0C21;
                    position: absolute;
                    left: 50%;
                    top: 0;
                }
            }
            .bottom_text{
                width: 100%;
                height: 74px;
                position: absolute;
                top: 292px;
                p{
                    font-size: 15px;
                    margin: 0;
                    line-height: 25px;
                }
            }
            .tijiao_btn{
                width: 250px;
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -125px;
                
                img{
                    height: 100%;
                }
            }
        }
        .tijiaotanchuang{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            .tijiao_content{
                width: 414px;
                height: 250px;
                border-radius: 8px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -125px;
                margin-left: -207px;
                background: #E7C598;
                .guanbi_tijiao {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    background: #BF0C21;
                    margin-left: 362px;
                    margin-top: 12px;
                    position: relative;
                    .tijiao_x {
                        position: absolute;
                        width: 16px;
                        height: 34px;
                        top: 50%;
                        left: 50%;
                        margin-top: -17px;
                        margin-left: -8px;
                        span {
                            font-size: 25px;
                            color: #e7c598;
                            text-align: center;
                        }
                    }
                }
                p{
                    text-align: center;
                    font-size: 40px;
                    color: #BF0C21;
                    font-family: "宋体";
                    margin-top: 36px;
                    
                }
                .tijiao_chakan{
                    width: 222px;
                    height: 38px;
                    border-radius: 10px;
                    margin: 20px auto;
                    background: #BF0C21;
                    p{
                        font-size: 20px;
                        color: #E7C598;
                        text-align: center;
                        padding-top: 5px;
                    }
                }
            }
        }
    }
}